<template>
  <view class="page">
    <Header :title="'抗遗忘复习'"></Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="tabs">
            <reviewTabs :current="0"></reviewTabs>
          </view>
          <view class="title"> {{ chapterName }}</view>
          <view class="list">
            <view class="list_content">
              <view
                class="item"
                v-for="(item, index) in list"
                :key="index"
                @click="hanldeChangeReview(item, index)"
              >
                <view class="item_index"> D{{ item.day }}天 </view>
                <view class="item_text"> {{ item.dateTime }} </view>
                <view class="iten_img">
                  <image
                    v-if="item.complete"
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/dui.png"
                    mode="scaleToFill"
                  />
                  <image
                    v-else
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/cuo.png"
                    mode="scaleToFill"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-popup
      class="custom-popup"
      v-model="show"
      :zoom="false"
      mode="center"
      width="900rpx"
      height="356rpx"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="mask">
        <view class="mask_title">提示</view>
        <view class="mask_content">
          <view class="mask_tips"> 请先补卡！ </view>
          <view class="mask_btn" @click="show = false">
            <text>关闭</text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getKyw21His } from "@/api/sync";
import reviewTabs from "./reviewTabs";

export default {
  components: { reviewTabs },
  data() {
    return {
      chapterId: "",
      chapterName: "",
      currentDayIndex: 0,
      list: [],
      show: false,
    };
  },
  onLoad(options) {
    this.chapterId = options.chapterId;
    this.getData();
  },
  methods: {
    getData() {
      getKyw21His(this.chapterId).then((res) => {
        this.chapterName = res.data[0].chapterName;
        this.list = res.data;
        this.currentDayIndex = this.list.findIndex(
          (item) => item.complete === 0
        );
      });
    },
    hanldeChangeReview(item, index) {
      if (item.complete === 1) return;
      if (index > this.currentDayIndex) {
        this.show = true;
      } else {
        uni.navigateTo({
          url: `/pages/review/review1Detail?chapterId=${this.chapterId}&id=${item.id}`,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./review1List";
</style>
